<template>
  <div class="detail">
    <Sub-header :title="playlist.name"></Sub-header>
    <Detail-top :path="playlist.coverImgUrl" :subText="playlist.desc" ref="top"></Detail-top>
    <div class="bottom">
      <ScrollView ref="scrollview">
        <Detail-bottom :playlist="playlist.tracks"></Detail-bottom>
      </ScrollView>
    </div>
  </div>
</template>

<script>
import SubHeader from "../components/Detail/DetailHeader";
import DetailTop from "../components/Detail/DetailTop";
import DetailBottom from "../components/Detail/DetailBottom";
import ScrollView from "../components/ScrollView";
import MetaInfo from '../../vue.meta.info'


import {getAlbum, getPlayList,getArtistsSongs} from "../api/index";

export default {
  name: "Detail",
  metaInfo:MetaInfo.detail,
  data() {
    return {
      playlist: {},
    }
  },
  components: {
    SubHeader,
    DetailTop,
    DetailBottom,
    ScrollView
  },
  methods: {},
  created() {
    if (this.$route.params.type === 'album') {
      getAlbum({id: this.$route.params.id})
          .then((response) => {
            if (response.code === 200) {
              // console.log(response.album);
              this.playlist = {
                name: response.album.name,
                coverImgUrl: response.album.picUrl,
                tracks: response.songs,
                desc:response.album.description
              }
            }
          })
          .catch((error) => {
            console.log(error);
          })
    } else if (this.$route.params.type === 'personalized') {
      getPlayList({id: this.$route.params.id})
          .then((response) => {
            if (response.code === 200) {
              // console.log(response.playlist);
              this.playlist = response.playlist;
              this.playlist.desc = response.playlist.description
            }
          })
          .catch((error) => {
            console.log(error);
          })
    }else if (this.$route.params.type === 'singer') {
      getArtistsSongs({id: this.$route.params.id})
          .then((response) => {
            if (response.code === 200) {
              // this.playlist = response.artist;
              // console.log(response);
              this.playlist = {
                name: response.artist.name + ' - '+ response.artist.alias[0],
                coverImgUrl: response.artist.picUrl,
                tracks: response.hotSongs,
                desc:response.artist.briefDesc,
              }
            }
          })
          .catch((error) => {
            console.log(error);
          })
    }else if (this.$route.params.type === 'rank') {
      getPlayList({id: this.$route.params.id})
          .then((response) => {
            // console.log(response);
            if (response.code === 200) {
              this.playlist = {
                name: response.playlist.name,
                coverImgUrl: response.playlist.coverImgUrl,
                tracks: response.playlist.tracks,
                desc:response.playlist.description,
              }
            }
          })
          .catch((error) => {
            console.log(error);
          })
    }
  },
  mounted() {
    //通过$refs获取到元素之后, 再通过$el可以获取这个元素的根元素 , 这样子就可以获取他的宽高等其他信息
    let defaultHeight = this.$refs.top.$el.offsetHeight;
    // console.log(defaultHeight);
    //调用 scrollView 函数
    this.$refs.scrollview.scrolling((offsetY) => {
      // console.log(offsetY);
      if (offsetY < 0) {
        //todo list
        // console.log(1);
        let scale = Math.abs(offsetY) / defaultHeight;
        this.$refs.top.changeMask(scale)
        // console.log('上拉');
      } else {
        let scale = 1 + offsetY / defaultHeight;
        // console.log(scale);
        this.$refs.top.$el.style.transform = `scale(${scale})`
        // console.log('下拉');
      }
    })
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/mixin";

.detail {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  @include bg_sub_color();

  .bottom {
    position: fixed;
    top: 500px;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>
